<template>
  <div>
    <div class="in2">
      <button class="b2">
        +86
        <i class="el-icon-arrow-down"></i>
      </button>
      <input
        class="in4A"
        type="text"
        placeholder="请输入手机号"
        v-model="userPhone"
      />
    </div>
    <hr class="hr" />
    <div @click="open" class="open"></div>
    <div>
      <el-row>
        <el-button
          type="success"
          :loading="this.userPhone == null ? true : false"
          round
          class="b1"
          @click="sendCode"
          >下一步</el-button
        >
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login3",
  data() {
    return {
      userPhone: null,
    };
  },
  
  mounted() {
    this.open();
  },
  methods: {
    open() {
         setTimeout(() => { 
      this.$confirm(    
        //   延迟执行,否则一闪而过
'<strong>点击同意即表示您已经阅读并同意<a href="https://in.m.jd.com/help/app/register_info.html">《京东用户注册协议》</a> 与<a href="https://ihelp.jd.com/n/help/tip/getTipsFacade.json?tipId=74">《京东隐私政策》</a>并将您的订单信息共享给为完成次订单所必须的第三方合作方.</strong>',
        "注册协议及隐私政策",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          dangerouslyUseHTMLString: true,
          center: true,
        }
      )
        .then(() => {
          
        })
        .catch(() => {
             window.location.href = "http://localhost:8080/member"
      // this.$router.push("/Login")

        });
    },200);
    },
    sendCode() {
      if (this.userPhone == null) {
        alert("手机号不能为空");
        return false;
      }
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      // 非全局不会重复,g全局,js正则表达式
      if (!reg.test(this.userPhone)) {
        alert("请输入正确的手机号");
        return false;
      } else {
        //  window.location.href = "http://localhost:8080/#/Login2"
      this.$router.push("/Login2")

      }
    },
  },
};
</script>
<style scoped>
hr {
  border: 1px solid rgb(226, 226, 217);
  margin: 10px auto;
  width: 320px;
}
input:focus {
  outline: medium;
}
.in4A {
  margin: 0px;
  width: 280px;
  border-style: none;
}
.in2 {
  margin: 1px;
}
.b1 {
  width: 330px;
}
.b2 {
  border: none;
  background-color: white;
}
.open {
  width: 300px;
}
</style>